import React, { Suspense } from 'react'
import routerList from "./index";
import { BrowserRouter, HashRouter, Routes, Route, Navigate } from "react-router-dom";
import { RouteItem } from "./type";

function RouterView() {
  let { mode, routes } = routerList;
  let renderRoutes = (arr: RouteItem[]) => {
    return arr && arr.map((item: RouteItem, index: number) => {
      return <Route
        key={index}
        path={item.path}
        element={item.to ? <Navigate to={item.to}></Navigate> : <item.element></item.element>}
      >
        {item.children && renderRoutes(item.children)}
      </Route>
    })
  }
  return (
    <Suspense fallback={<div>路由加载中。。。。。。</div>}>
      {mode == "history" ?
        <BrowserRouter>
          <Routes>
            {renderRoutes(routes)}
          </Routes>
        </BrowserRouter> : <HashRouter></HashRouter>}
    </Suspense>
  )
}

export default RouterView
